/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable jsx-a11y/anchor-is-valid */
import { Input } from 'antd';
import React from 'react';

import loginBg from '@/assets/images/login-bg.png';
import { SvgIcon } from '@/components/icon';

import SubmitButton from './components/SubmitButton';
import SuccessModal from './components/SuccessModal';
// import { getSteps } from './data/mockData';
import { useRegistration } from './hooks/useRegistration';
import './TgRegister.scss';

// const FormItem = AntdForm.Item;

interface TgLoginProps {
  onLoginSuccess?: () => void;
}

const TgLogin: React.FC<TgLoginProps> = ({ onLoginSuccess }) => {
  const {
    currentStep,
    email,
    password,
    confirmPassword,
    // verificationCode,
    companyName,
    companyWebsite,
    positionRole,
    isLoading,
    error,
    // fieldErrors,
    showSuccessModal,
    setEmail,
    setPassword,
    setConfirmPassword,
    // setVerificationCode,
    setCompanyName,
    setCompanyWebsite,
    setPositionRole,
    setError: _setError,
    handleEmailVerification,
    handleCompanyInfoSubmit,
    handleSuccessConfirm,
    handleRestart,
    handlePrev,
  } = useRegistration(onLoginSuccess);

  // const steps = getSteps(currentStep);

  return (
    <div
      style={{
        backgroundImage: `url(${loginBg})`,
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
      }}
      className="min-w-screen flex min-h-screen items-center justify-center overflow-hidden"
    >
      <div className="relative z-10 flex min-h-screen w-[460px] items-center justify-center p-4">
        <div className="w-full max-w-md rounded-2xl border-0 bg-white p-6 shadow-lg backdrop-blur-sm">
          {/* 水印 */}
          <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-6xl font-bold text-gray-400 opacity-5">
            天工睿核
          </div>

          {/* 标题 */}
          <div className="text-center">
            {/* Logo/Avatar 与登录页一致 */}
            <div className="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-white">
                {/* 优先使用 SvgIcon，若未渲染则降级为图片 */}
                <SvgIcon icon="logo" size={48} />
              </div>
            </div>
            <h2
              className="mb-1 text-[22px] font-bold leading-7"
              style={{
                background: 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
                WebkitBackgroundClip: 'text',
                backgroundClip: 'text',
                color: 'transparent',
                display: 'inline-block',
                fontFamily: 'AlimamaShuHeiTi, sans-serif',
              }}
            >
              天工睿核智能体
            </h2>
            <p className="text-[11px] text-text-3">enterprise AI empowering platform</p>
          </div>

          {/* 进度指示器 */}
          {/* <ProgressIndicator steps={steps} /> */}

          <div className="relative z-10">
            {/* 步骤1: 邮箱验证 */}
            {currentStep === 1 && (
              <form className="tg-register-form space-y-5" onSubmit={handleEmailVerification}>
                <div className="space-y-3">
                  <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
                    * 邮箱
                  </label>
                  <Input
                    id="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="请输入邮箱"
                    required
                  />
                  <label
                    htmlFor="password"
                    className="mb-1 block text-sm font-medium text-gray-700"
                  >
                    * 密码
                  </label>
                  <Input.Password
                    id="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="请输入密码"
                    required
                  />

                  <label
                    htmlFor="confirmPassword"
                    className="mb-1 block text-sm font-medium text-gray-700"
                  >
                    * 确认密码
                  </label>
                  <Input.Password
                    id="confirmPassword"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    placeholder="请再次输入密码"
                    required
                  />
                </div>

                {error && (
                  <div className="bg-red-50 text-red-600 rounded-lg p-2 text-center text-sm">
                    {error}
                  </div>
                )}

                <div className="mt-2">
                  <SubmitButton
                    isLoading={isLoading}
                    loadingText="验证中..."
                    buttonText="验证邮箱"
                  />
                </div>

                {/* 测试账号提示 */}
                {/* <TestAccountInfo accounts={testAccounts} /> */}
              </form>
            )}

            {/* 步骤2: 完善企业信息 */}
            {currentStep === 2 && (
              <form className="tg-register-form space-y-5" onSubmit={handleCompanyInfoSubmit}>
                <div className="space-y-3">
                  <label
                    htmlFor="companyName"
                    className="mb-1 block text-sm font-medium text-gray-700"
                  >
                    * 企业名称
                  </label>
                  <Input
                    id="companyName"
                    value={companyName}
                    onChange={(e) => setCompanyName(e.target.value)}
                    placeholder="请输入企业名称"
                    required
                  />
                  <label
                    htmlFor="companyWebsite"
                    className="mb-1 block text-sm font-medium text-gray-700"
                  >
                    企业官网链接
                  </label>
                  <Input
                    id="companyWebsite"
                    type="url"
                    value={companyWebsite}
                    onChange={(e) => setCompanyWebsite(e.target.value)}
                    placeholder="URL"
                  />
                  <label
                    htmlFor="positionRole"
                    className="mb-1 block text-sm font-medium text-gray-700"
                  >
                    岗位角色
                  </label>
                  <Input
                    id="positionRole"
                    value={positionRole}
                    onChange={(e) => setPositionRole(e.target.value)}
                    placeholder="岗位角色"
                  />
                </div>

                {error && (
                  <div className="bg-red-50 text-red-600 rounded-lg p-2 text-center text-sm">
                    {error}
                  </div>
                )}

                <div className="mt-2">
                  <SubmitButton isLoading={isLoading} loadingText="提交中..." buttonText="完成" />
                </div>

                <div className="flex items-center justify-center gap-4">
                  <button
                    type="button"
                    onClick={handlePrev}
                    className="text-sm font-medium text-gray-600 hover:text-blue-500"
                  >
                    上一步
                  </button>
                  <button
                    type="button"
                    onClick={handleRestart}
                    className="text-sm font-medium text-gray-600 hover:text-blue-500"
                  >
                    重新开始
                  </button>
                </div>
              </form>
            )}

            {/* 步骤3: 注册成功 */}
            {currentStep === 3 && (
              <div className="space-y-5 text-center">
                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
                  <svg
                    className="h-8 w-8 text-green-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                </div>

                <div>
                  <h3 className="text-lg font-medium text-gray-900">注册成功！</h3>
                  <p className="mt-2 text-sm text-gray-600">
                    欢迎加入天工睿核，正在为您跳转到主页...
                  </p>
                </div>

                <div className="flex justify-center">
                  <div className="h-2 w-32 rounded-full bg-gray-200">
                    <div className="bg-blue-600 h-2 w-24 animate-pulse rounded-full" />
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* 注册成功弹窗 */}
          <SuccessModal
            isOpen={showSuccessModal}
            onConfirm={handleSuccessConfirm}
            onRestart={handleRestart}
          />
        </div>
      </div>
    </div>
  );
};

export default TgLogin;
